<template>
  <div class="analysis-index">
    <div class="analysis-index-top">
      <div v-for="(item, index) in tabNames" :key="item" @click="handleItem(item, index)" class="item"
        :class="[activeTab === index && 'item-active']">
        {{ item }}
      </div>
    </div>
    <div class="analysis-body">
      <div class="opera">
        <div class="left">
          <statisticalTimeTemp @changeTimeVal="changeTimeVal"></statisticalTimeTemp>
        </div>
        <div class="right">
          <div v-for="(item, index) in tags" :key="item.name" class="item">
            <span class="block" :class="{ 'setBorder': index === 0 }" :style="{ background: item.color }"></span>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="chart-dom">
        <div ref="chartAnalysis" class="chartAnalysis"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { chartIndex } from './chartConfig/index';
import statisticalTimeTemp from './common/statisticalTimeTemp.vue';
import { indexAnalysis } from '@api/projectManaApi';

export default {
  components: {
    statisticalTimeTemp
  },
  data() {
    return {
      tabNames: ['签约项目金额完成情况', '项目开工率', '开工项目计划投资额完成情况', '固投项目资金到位完成情况', '非固投项目资金到位完成情况'],
      activeTab: 0,
      tags: [{
        name: '签约项目金额目标任务（亿元）',
        color: '#F0F0F0'
      }, {
        name: '签约项目金额完成情况（亿元）',
        color: '#81AFF3'
      }, {
        name: '预警: 未达序时进度',
        color: '#E56767'
      }],
      chartAnalysis: null,
      cutTime: '',
      isEmpty: false
    };
  },
  created() {

  },
  mounted() {
    this.initSize();
    this.initData();
    window.addEventListener('resize', () => {
      this.initSize();
      this.chartAnalysis.resize();
    });
  },
  methods: {
    changeTimeVal(val) {
      this.cutTime = val;
      this.initData();
    },
    handleItem(item, index) {
      this.activeTab = index;
      this.initData();
    },
    async initData() {
      const params = {
        time: this.cutTime,
        type: `${this.activeTab + 1}`
      };
      const res = await indexAnalysis(params);
      if (res) {
        let countyName = [];
        let topData = [];
        let leftData = [];
        let barShowData = [];
        let bgData = [];
        for (let region of Object.keys(res)) {
          countyName.push(region);
          let targets = res[region];
          if (this.activeTab === 0) {
            topData.push(targets['签约项目金额目标任务']);
            leftData.push(targets['签约项目完成率 ']);
            barShowData.push(targets['签约项目金额完成情况 ']);
          }
          if (this.activeTab === 1) {
            topData.push(targets['项目开工金额目标任务']);
            leftData.push(targets['项目开工完成率 ']);
            barShowData.push(targets['项目开工金额完成情况 ']);
          }
          if (this.activeTab === 2) {
            topData.push(targets['开工项目金额目标任务']);
            leftData.push(targets['开工项目完成率 ']);
            barShowData.push(targets['开工项目金额完成情况 ']);
          }
          if (this.activeTab === 3) {
            topData.push(targets['固投项目金额目标任务']);
            leftData.push(targets['固投项目完成率 ']);
            barShowData.push(targets['固投项目金额完成情况 ']);
          }
          if (this.activeTab === 4) {
            topData.push(targets['非固投项目金额目标任务']);
            leftData.push(targets['非固投项目完成率 ']);
            barShowData.push(targets['非固投项目金额完成情况 ']);
          }
          bgData.push(100);
        }
        const option = { ...chartIndex };
        option.series[0].data = leftData;
        option.series[1].data = bgData;
        option.series[2].data = bgData;
        option.xAxis[0].data = countyName;
        option.xAxis[1].data = topData;
        option.xAxis[2].data = barShowData;
        option.series[0].label = {
          normal: {
            show: true,
            position: 'top',
            textStyle: {
              fontSize: '12',
              color: function (params) {
                return params.value > 100 ? '#81AFF3' : '#E56767';
              }
            },
            rich: {
              a: {
                fontSize: 15,
                fontWeight: 'bold'
              },
              b: {
                fontSize: 13,
                marginTop: 15
              }
            },
            formatter: function (params) {
              return `{a|${params.name}亿元}\n {b|${params.value.toFixed(2)}%}`;
            }
          }
        };
        option.series[1].label = {
          show: true,
          normal: {
            show: true,
            position: 'top',
            textStyle: {
              fontSize: '14',
              color: '#E56767'
            },
            formatter: function (params) {
              return `${params.name}亿元`;
            }
          }
        };
        this.initChart(option);
      }
    },
    initSize() {
      const clientH = document.body.clientHeight;
      this.chartH = clientH - 420;
    },
    initChart(option) {
      this.chartAnalysis = this.$echarts.init(this.$refs.chartAnalysis);
      this.chartAnalysis.setOption(option);
    }
  }
};
</script>

<style scoped lang="less">
.analysis-index {
  width: 100%;
  height: 100%;
}

.analysis-index-top {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.05);

  .item {
    margin: 0 15px;
    height: 100%;
  }

  .item:hover {
    cursor: pointer;
    color: #0063F7;
  }

  .item-active {
    color: #0063F7;
    border-bottom: 3px solid #0063F7;
    font-weight: bold;
  }
}

.analysis-body {
  width: 100%;
  height: calc(100% - 70px);
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
  box-sizing: border-box;

  .opera {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-between;

    .right {
      display: flex;

      .item {
        margin: 0 20px;
        display: flex;
        align-items: center;
      }

      .block {
        width: 18px;
        height: 18px;
        display: inline-block;
        margin-right: 5px;
      }
    }

    .left {
      margin-left: 20px;
      display: flex;
      align-items: center;
    }
  }

  .chart-dom {
    width: 100%;
    height: calc(100% - 70px);

    .chartAnalysis {
      width: 100%;
      height: 100%;
    }
  }
}

.setBorder {
  border-top: 3px solid #E56767;
}
</style>
